package 界面.组件.按钮

import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.shape.CircleShape
import androidx.compose.material3.Icon
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.draw.clip
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.graphics.vector.ImageVector
import androidx.compose.ui.unit.Dp
import androidx.compose.ui.unit.dp
import cn.mujiankeji.mbrowser.界面.图标.MyIconPack
import cn.mujiankeji.mbrowser.界面.图标.myiconpack.关闭
import 界面.app.图标.myiconpack.对

/**
 * 32dp Modifier 设定宽度
 */
@Composable
fun 按钮(名称 : String,
         enable: Boolean,
               backColor : Color,
               contentColor : Color,
               modifier: Modifier,
               height : Dp = 32.dp,
               clickable: () -> Unit){
    Box(modifier
        .height(height)
        .clip(MaterialTheme.shapes.small)
        .background(backColor)
        .clickable { clickable() },
        contentAlignment = Alignment.Center){
        Text(名称, style = MaterialTheme.typography.bodyMedium,
            color = contentColor)
    }
}

/**
 * 内置了颜色 使用也和按钮一致
 */
@Composable
fun 取消按钮(modifier: Modifier, height: Dp = 32.dp,
             名称 : String = "取消",
             clickable: () -> Unit){
    按钮(名称,true,MaterialTheme.colorScheme.surfaceVariant,
        MaterialTheme.colorScheme.onSurfaceVariant,modifier,height,clickable)

}

// 应用色低
@Composable
fun 确认按钮(modifier: Modifier,
             名称 : String = "确定",
             启用 : Boolean = true,
             height: Dp = 32.dp,
             clickable: () -> Unit){
    按钮(名称,启用,MaterialTheme.colorScheme.primary,
        MaterialTheme.colorScheme.onPrimary,modifier,height,clickable)
}

// 红底
@Composable
fun 错误按钮(名称 : String,
             modifier: Modifier,
             启用 : Boolean = true,
             height: Dp = 32.dp,clickable: () -> Unit){
    按钮(名称,启用,MaterialTheme.colorScheme.error,
        MaterialTheme.colorScheme.onError,modifier,height,clickable)
}


// 55x25  不带阴影  ✓  可设背景色，但文字色固定白色
@Composable
fun 确认图标按钮(color : Color = MaterialTheme.colorScheme.primary,clickable : ()->Unit){
    Box(Modifier.size(55.dp,25.dp)
        .clip(MaterialTheme.shapes.small)
        .background(color)
        .clickable { clickable() },
        contentAlignment = Alignment.Center){
        Icon(MyIconPack.对,"",
            modifier = Modifier.size(16.dp),
            tint = Color.White)
    }
}


// 55x25  不带阴影  x
@Composable
fun 取消图标按钮(clickable: () -> Unit){
    Box(Modifier.size(55.dp,25.dp)
        .clip(MaterialTheme.shapes.small)
        .background(MaterialTheme.colorScheme.surfaceVariant)
        .clickable { clickable() },
        contentAlignment = Alignment.Center){
        Icon(MyIconPack.关闭,"",
            modifier = Modifier.size(16.dp),
            tint = MaterialTheme.colorScheme.onSurfaceVariant)
    }
}

@Composable
fun 工具栏隔离线(){
    Spacer(
        Modifier.padding(horizontal = 5.dp).size(1.dp,10.dp)
            .background(MaterialTheme.colorScheme.surfaceVariant))
}

/**
 * width
 * 用于工具栏（小导航栏，如小窗小记的导航栏）里的小图标按钮块，统一高度，只可以在 Row 中使用
 */
@Composable
fun 工具栏按钮块(selected : Boolean,
                          clickable : ()->Unit,
                          modifier: Modifier = Modifier
                              .padding(horizontal = 5.dp)
                              .size(30.dp),
                          content : @Composable ()->Unit){
    Box(modifier
        .clip(CircleShape)
        .then(if (!selected) Modifier
        else Modifier.background(MaterialTheme.colorScheme.surfaceVariant))
        .clickable {  clickable() },
        contentAlignment = Alignment.Center){
        content()
    }
}

// 30dp
@Composable
fun 工具栏图标按钮(selected : Boolean,
                            icon : ImageVector,
                            enable : Boolean = true,
                            clickable : ()->Unit){
    工具栏按钮块(selected,clickable){
        Icon(icon,"",
            modifier = Modifier.size(20.dp),
            tint = if (enable) MaterialTheme.colorScheme.secondary
            else MaterialTheme.colorScheme.outline)
    }
}


